<template>
  <div class="c-login">
    <form class="login__center">
      <div class="u-first_titile login__title">Login</div>
      <label class="login__username">
        <span class="login__tips">Emall Address</span>
        <input type="text" required v-model="username">
        <Icon use="dianhua" class="login__icon" />
      </label>
      <label class="login__password">
        <span class="login__tips">Password</span>
        <input type="password" required v-model="password">
        <Icon use="dianhua" class="login__icon" />
      </label>
      <div class="login__embellish">
        <label for="">
          <input type="checkbox">
          记住密码
        </label>
        <span class="forgot__password">忘记密码</span>
      </div>
      <button class="login__btn" @click="submit">Login</button>
      <div class="login__desc">
        Don`t have an account? Sognup now
      </div>
    </form>
  </div>
</template>

<script setup>
import Icon from '@/components/SVG/index.vue';
import { loginApi } from '@/api/user.js'
import { useUserStore } from '@/pinia/userStore.js'
import { useRouter, useRoute } from 'vue-router';
import subscribe from '@/utils/subscribe.js'
import { ref, onBeforeMount } from 'vue';


const username = ref("");
const password = ref("");
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
function submit (e) {
  e.preventDefault();
  login();
}

async function login () {
  const user = await loginApi({ username: username.value, password: password.value })
  skipHome(user)
}

function skipHome (user) {
  // 存储到pina中
  userStore.setLoginInfo(user);
  router.replace(route.query.redirect ?? '/')
  // 创建websocket
  import("../../websocket/clientRunner.js")
  subscribe.on("WEBSOCKET:CONNECTION", () => {
    subscribe.emits("WEBSOCKET:SEND", { type: "CONNECT", message: "连接请求", userId: user.id })
  })
}

</script>

<style lang="scss" scoped>
.c-login {
  position: absolute;
  inset: 0;
  // width: 100vw;
  // height: 100vh;
  display: flex;
  background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.0ljqwoYBob70QUmzDohTqgAAAA?rs=1&pid=ImgDetMain) no-repeat 0 0/100% 100%;
  user-select: none;
}

.login__center {
  margin: auto;
  padding: 40px;
  border: 1px solid #eee;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  backdrop-filter: blur(10px);

  // justify-content: center;
  // align-items: center;
  >label {
    position: relative;

    >input {
      width: 100%;
      border: none;
      outline: none;
      background: none;
      padding: 6px 0px;
      font-size: 16px;
      border-bottom: 2px solid #eee;
    }

    .login__tips {
      // color: #eee;
      position: absolute;
      bottom: 10%;
      left: 1%;
      transition: transform .2s linear;
      color: #d3d3d3;

      &:has(+input:focus, +input:valid) {
        transform: translateY(-120%);
        color: white;
      }

    }

    .login__icon {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-80%);
    }

  }

  .login__embellish {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    margin-top: -20px;
  }

  .login__btn {
    color: black;
    font-weight: 700;
    margin-top: -10px;
    outline: none;
  }

  .login__desc {
    color: white;
    font-size: 16px;
  }

}

.login__title {
  font-weight: 700;
  font-size: 30px;
  color: white;
}
</style>